import React, {PureComponent} from "react"
import { Icon as LegacyIcon } from '@ant-design/compatible';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Breadcrumb, Button, Col, PageHeader, Row, Skeleton } from "antd";
import "./index.less"
import ShopItem from "../../../my-shop/components/shops/shop-item"
import {Link} from "react-router-dom"
import {withRouter} from "react-router"
import shopDetailCompose from "./compose"
import {defaultSize} from "project-config"


export default @shopDetailCompose
@withRouter class ShopDetail extends PureComponent {

  render() {
    const {data, goBack} = this.props

    return (
      <div className={'zr-panel'}>
        <div className={'zr-panel-header'}>
          <div>
            {/*<Breadcrumb>*/}
            {/*  <Breadcrumb.Item><Link to="/app/home"><LegacyIcon type={'home'}/></Link></Breadcrumb.Item>*/}
            {/*  <Breadcrumb.Item><Link to="/app/shop/shops">商户列表</Link></Breadcrumb.Item>*/}
            {/*  <Breadcrumb.Item>商户详情</Breadcrumb.Item>*/}
            {/*</Breadcrumb>*/}
            <PageHeader backIcon={<ArrowLeftOutlined />}
                        onBack={goBack} title={`商户详情`}
                        subTitle={data.shopName}/>
          </div>
        </div>

        <div className={'shop-container shop-detail-container'}>
          <Skeleton active loading={!data || data.length === 0}>
            <ShopItem data={data} onBack={goBack}>
              <div className={'si-button-bar'}>
                <Row gutter={16}>
                  <Col span={8}>
                  </Col>
                  <Col span={16}>
                    <Button size={defaultSize} type={'primary'} onClick={goBack}>
                      <ArrowLeftOutlined /> 返回列表
                    </Button>
                  </Col>
                </Row>
              </div>
            </ShopItem>
          </Skeleton>
        </div>
      </div>
    );
  }
}